<!DOCTYPE html>
<html>
<head>
  <title>HTML标签和汇率转换</title>
  <script>
    function convertCurrency() {
      var amount = document.getElementById("amount").value;
      var rate = document.getElementById("rate").value;
      var convertedAmount = amount * rate;
      document.getElementById("result").innerHTML = "转换结果：" + convertedAmount.toFixed(2);
    }
  </script>

  <!-- 内部样式表 -->
    <style>
        table {
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid black;
            padding: 8px;
        }
    </style>
</head>
<body>
    <h1>HTML标签和汇率转换</h1>

    <h2>HTML标签示例</h2>
    <p>下面是一些常见的HTML标签的示例：</p>
    
    <h3>&lt;h1&gt; - &lt;h6&gt; 标题</h3>
    <h1>这是h1标题</h1>
    <h2>这是h2标题</h2>
    <h3>这是h3标题</h3>
    <h4>这是h4标题</h4>
    <h5>这是h5标题</h5>
    <h6>这是h6标题</h6>
    
    <h3>&lt;p&gt; 段落</h3>
    <p>这是一个段落。</p>
    
    <h3>&lt;a&gt; 链接</h3>
    <p>这是一个链接: <a href="https://www.example.com">示例链接</a></p>
    
    <h3>&lt;img&gt; 图像</h3>
    <img src="image.jpg" alt="示例图像">


    <!--  表格--> 
    <h1>主流货币汇率</h1>
    <table>
        <tr>
            <th>货币</th>
            <th>汇率</th>
        </tr>
        <tr>
            <td>美元 (USD)</td>
            <td>6.39</td>
        </tr>
        <tr>
            <td>欧元 (EUR)</td>
            <td>7.49</td>
        </tr>
        <tr>
            <td>英镑 (GBP)</td>
            <td>8.59</td>
        </tr>
        <!-- 添加其他货币行 -->
    </table>

    <hr>

    <!-- 表单 -->
    <h2>汇率转换器</h2>
    <label for="amount">金额：</label>
    <input type="number" id="amount" placeholder="输入金额">
    <br>
    <label for="rate">汇率：</label>
    <input type="number" id="rate" placeholder="输入汇率">
    <br>
    <button onclick="convertCurrency()">转换</button>
    <p id="result"></p>

    <!-- 分割线 -->
    <!-- 内联css -->
    <hr>

    <h1 style="font-family:verdana;">一个标题</h1>
    <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

    <hr>



</body>
</html>